/**
 * 主题管理模块
 * 支持动态主题切换和配置管理
 */

const state = {
  // 当前主题
  currentTheme: 'light',
  
  // 主题配置
  themes: {
    light: {
      name: '浅色主题',
      tabbar: {
        backgroundColor: '#ffffff',
        color: '#7A7E83',
        selectedColor: '#667eea',
        borderColor: '#e5e5e5'
      },
      colors: {
        primary: '#667eea',
        secondary: '#764ba2',
        background: '#f8f9fa',
        surface: '#ffffff',
        text: '#333333',
        textSecondary: '#7A7E83'
      }
    },
    dark: {
      name: '深色主题',
      tabbar: {
        backgroundColor: '#1a1a1a',
        color: '#999999',
        selectedColor: '#667eea',
        borderColor: '#333333'
      },
      colors: {
        primary: '#667eea',
        secondary: '#764ba2',
        background: '#121212',
        surface: '#1e1e1e',
        text: '#ffffff',
        textSecondary: '#999999'
      }
    },
    purple: {
      name: '紫色主题',
      tabbar: {
        backgroundColor: '#2d1b69',
        color: '#b794f6',
        selectedColor: '#e9d8fd',
        borderColor: '#553c9a'
      },
      colors: {
        primary: '#805ad5',
        secondary: '#553c9a',
        background: '#1a202c',
        surface: '#2d3748',
        text: '#ffffff',
        textSecondary: '#b794f6'
      }
    }
  },
  
  // 自定义tabbar配置
  customTabbarConfig: null,
  
  // 动画配置
  animationConfig: {
    enabled: true,
    duration: 300,
    easing: 'cubic-bezier(0.25, 0.8, 0.25, 1)'
  },
  
  // 路由状态
  routeState: {
    currentPath: '',
    lastSwitchTime: 0,
    switchCount: 0
  },
  
  // 错误记录
  errorLog: []
}

const mutations = {
  // 设置主题
  SET_THEME(state, theme) {
    if (state.themes[theme]) {
      state.currentTheme = theme
      // 保存到本地存储
      localStorage.setItem('wujue_theme', theme)
      // 应用主题到document
      document.documentElement.setAttribute('data-theme', theme)
    }
  },
  
  // 设置自定义tabbar配置
  SET_CUSTOM_TABBAR_CONFIG(state, config) {
    state.customTabbarConfig = config
    localStorage.setItem('wujue_custom_tabbar', JSON.stringify(config))
  },
  
  // 更新动画配置
  SET_ANIMATION_CONFIG(state, config) {
    state.animationConfig = { ...state.animationConfig, ...config }
    localStorage.setItem('wujue_animation_config', JSON.stringify(state.animationConfig))
  },
  
  // 添加自定义主题
  ADD_CUSTOM_THEME(state, { name, config }) {
    state.themes[name] = config
    localStorage.setItem('wujue_custom_themes', JSON.stringify(state.themes))
  },
  
  // 同步路由状态
  SYNC_ROUTE_STATE(state, routeData) {
    state.routeState = { ...state.routeState, ...routeData }
  },
  
  // 记录错误
  RECORD_ERROR(state, errorData) {
    state.errorLog.push(errorData)
    // 只保留最近100条错误记录
    if (state.errorLog.length > 100) {
      state.errorLog = state.errorLog.slice(-100)
    }
  },
  
  // 清除错误日志
  CLEAR_ERROR_LOG(state) {
    state.errorLog = []
  }
}

const actions = {
  // 切换主题
  switchTheme({ commit }, theme) {
    commit('SET_THEME', theme)
  },
  
  // 初始化主题
  initTheme({ commit }) {
    // 从本地存储读取主题设置
    const savedTheme = localStorage.getItem('wujue_theme')
    const savedTabbarConfig = localStorage.getItem('wujue_custom_tabbar')
    const savedAnimationConfig = localStorage.getItem('wujue_animation_config')
    const savedCustomThemes = localStorage.getItem('wujue_custom_themes')
    
    if (savedTheme) {
      commit('SET_THEME', savedTheme)
    }
    
    if (savedTabbarConfig) {
      try {
        commit('SET_CUSTOM_TABBAR_CONFIG', JSON.parse(savedTabbarConfig))
      } catch (error) {
        console.error('Failed to parse custom tabbar config:', error)
      }
    }
    
    if (savedAnimationConfig) {
      try {
        commit('SET_ANIMATION_CONFIG', JSON.parse(savedAnimationConfig))
      } catch (error) {
        console.error('Failed to parse animation config:', error)
      }
    }
    
    if (savedCustomThemes) {
      try {
        const customThemes = JSON.parse(savedCustomThemes)
        Object.keys(customThemes).forEach(themeName => {
          if (!state.themes[themeName]) {
            commit('ADD_CUSTOM_THEME', { name: themeName, config: customThemes[themeName] })
          }
        })
      } catch (error) {
        console.error('Failed to parse custom themes:', error)
      }
    }
  },
  
  // 设置自定义tabbar
  setCustomTabbar({ commit }, config) {
    commit('SET_CUSTOM_TABBAR_CONFIG', config)
  },
  
  // 更新动画设置
  updateAnimationConfig({ commit }, config) {
    commit('SET_ANIMATION_CONFIG', config)
  },
  
  // 创建自定义主题
  createCustomTheme({ commit }, { name, config }) {
    commit('ADD_CUSTOM_THEME', { name, config })
  },
  
  // 同步路由状态
  syncRouteState({ commit }, routeData) {
    commit('SYNC_ROUTE_STATE', routeData)
  },
  
  // 记录错误
  recordError({ commit }, errorData) {
    commit('RECORD_ERROR', errorData)
  },
  
  // 清除错误日志
  clearErrorLog({ commit }) {
    commit('CLEAR_ERROR_LOG')
  }
}

const getters = {
  // 获取当前主题配置
  currentThemeConfig: (state) => {
    return state.themes[state.currentTheme] || state.themes.light
  },
  
  // 获取当前tabbar配置
  currentTabbarConfig: (state, getters) => {
    return state.customTabbarConfig || getters.currentThemeConfig.tabbar
  },
  
  // 获取所有可用主题
  availableThemes: (state) => {
    return Object.keys(state.themes).map(key => ({
      key,
      name: state.themes[key].name,
      config: state.themes[key]
    }))
  },
  
  // 检查是否为深色主题
  isDarkTheme: (state) => {
    return state.currentTheme === 'dark' || 
           (state.themes[state.currentTheme] && 
            state.themes[state.currentTheme].colors.background === '#121212')
  },
  
  // 获取动画配置
  animationConfig: state => state.animationConfig,
  
  // 获取路由状态
  routeState: state => state.routeState,
  
  // 获取错误日志
  errorLog: state => state.errorLog,
  
  // 获取最近的错误
  recentErrors: state => state.errorLog.slice(-10)
}

export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
}